<template>
    <div class="addproject">
        <Addtitle>新增收费项目</Addtitle>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="inputbox">
                <div class="left">
                    <!-- 项目名称 -->
                    <el-form-item label="项目名称" prop="name" class="inputtaxt">
                        <el-input v-model="ruleForm.name" placeholder="请输入项目名称"></el-input>
                    </el-form-item>
                    <!-- 计费方式 -->
                     <el-form-item label="计费方式" prop="region" class="selectinput">
                        <el-select v-model="ruleForm.region" placeholder="请选择计费方式">
                        <el-option label="按建筑面积" value="按建筑面积"></el-option>
                        <el-option label="按公摊面积" value="按公摊面积"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 价格 -->
                    <div class="spli">
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="ruleForm.price" placeholder="请输入价格"></el-input>
                        </el-form-item>
                        <p>元</p>
                    </div>
                    <!-- 账单周期 -->
                    <div class="spli">
                        <el-form-item label="账单周期" prop="billingcycle">
                            <el-select v-model="ruleForm.billingcycle" placeholder="请选择账单周期">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <p>个月</p>
                    </div>
                    <!-- 违约起算天数 -->
                    <div class="spli">
                        <el-form-item label="违约起算天数" prop="name">
                            <el-input v-model="ruleForm.defaultdate" placeholder="请输入违约起算天数"></el-input>
                        </el-form-item>
                        <p>天</p>
                    </div>
                    <!-- 是否支持优惠券 -->
                    <el-form-item label="是否支持优惠券:" prop="coupon" class="radioinput">
                        <el-radio-group v-model="ruleForm.coupon">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 状态 -->
                    <el-form-item label="状态:" prop="state" class="radioinput">
                        <el-radio-group v-model="ruleForm.state">
                        <el-radio label="启用"></el-radio>
                        <el-radio label="禁用"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="right">
                    <!-- 项目类别 -->
                     <el-form-item label="项目类别" prop="Category" class="selectinput">
                        <el-select v-model="ruleForm.Category" placeholder="请选择项目类别">
                        <el-option label="物业管理费用" value="物业管理费用"></el-option>
                        <el-option label="物业管理费用1" value="物业管理费用1"></el-option>
                        </el-select>
                    </el-form-item>
                     <!-- 计量单位 -->
                    <el-form-item label="计量单位" prop="measurement" class="inputtaxt">
                        <el-input v-model="ruleForm.measurement" placeholder="请输入计量单位"></el-input>
                    </el-form-item>
                    <!-- 金额精确取数 -->
                    <el-form-item label="金额精确取数" prop="Accurate" class="radioinput">
                        <el-radio-group v-model="ruleForm.Accurate">
                        <el-radio label="精确到分（默认）"></el-radio>
                        <el-radio label="精确到角（四舍五入）"></el-radio>
                        <el-radio label="精确到元（四舍五入）"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 违约金率 -->
                    <div class="splis">
                        <el-form-item label="违约金率" prop="liquidated">
                            <el-input v-model="ruleForm.liquidated" placeholder="请输入违约金率"></el-input>
                        </el-form-item>
                        <p class="bite">千分之 (%)</p>
                    </div>
                    <!-- 带有下方文本的输入框 -->
                    <div class="splitext">
                        <el-form-item label="违约起算天数" prop="Defaultcalculation">
                            <el-input v-model="ruleForm.Defaultcalculation" placeholder="请输入违约起算天数"></el-input>
                        </el-form-item>
                        <p>违约执行日期之前日期不参与计算违约天数</p>
                    </div>
                </div>
            </div>
            
            <div class="buttonbox">
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" class="creat">保存</el-button>
                    <el-button @click="resetForm('ruleForm')" class="reseate">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import Addtitle from '../components/Addtitle.vue'
import Fromname from '../components/Fromnames.vue'
import Fromselect from '../components/Fromselect.vue'
import Fromradio from '../components/Fromradio.vue'
export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          price:'',
          billingcycle:'',  //账单周期
          defaultdate:'',   //违约起算天数
          coupon:'',        //是否支持优惠券
          state:'',         //状态
          Category:'',      //项目类别
          measurement:'',   //计量单位
          Accurate:'',      //金额精确取数
          liquidated:'',    //违约金率
          Defaultcalculation:'',//违约起算天数
          delivery: false,
        },
        rules: {
          name: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择计费方式', trigger: 'change' }
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          billingcycle:[
            { required: true, message: '请选择账单周期', trigger: 'change' }
          ],
          defaultdate:[
            { required: true, message: '请输入违约起算天数', trigger: 'blur' },
          ],
          coupon:[
            { required: false, message: '请选择是否支持优惠券', trigger: 'change' }
          ],
          state:[
            { required: true, message: '请选择状态', trigger: 'change' }
          ],
          Category:[
            { required: true, message: '请选择项目类别', trigger: 'change' }
          ],
          measurement:[
            { required: false, message: '请输入计量单位', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          Accurate:[
            { required: false, message: '请选择金额精确取数', trigger: 'change' }
          ],
          liquidated:[
            { required: true, message: '请输入违约金率', trigger: 'blur' },
          ],
          Defaultcalculation:[
            { required: false, message: '请输入违约起算天数', trigger: 'blur' },
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: false, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.$axios.post('http://127.0.0.1/chargeiteminsert',{
                ...this.ruleForm
            },{
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                },
            }).then(res=>{
                this.$router.go(-1)
                this.$message({
                    type: 'success',
                    message: '数据添加成功!'
                });
            }).catch(err=>{
                console.log(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    components:{
        Addtitle,
        Fromname,
        Fromselect,
        Fromradio
    }
}
</script>

<style lang="scss" scoped>
    .addproject{
        width: 1260px;
        margin: auto;
        background-color: #fff;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        .inputbox{
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            .selectinput{
                width: 520px;
                ::v-deep .el-form-item__label{
                    // width: 120px !important;
                    padding-right: 0px;
                    // box-sizing: border-box;
                }
                ::v-deep .el-form-item__content{
                    margin-left: 120px !important;
                }
                ::v-deep .el-input__inner{
                    width: 400px;
                }
            }
            .inputtaxt{
                width: 520px;
                ::v-deep .el-form-item__label{
                    // width: 120px !important;
                    padding-right: 0px;
                    // box-sizing: border-box;
                }
                ::v-deep .el-form-item__content{
                    margin-left: 120px !important;
                }
                ::v-deep .el-input__inner{
                    width: 400px;
                }
            }
            .right{
                .radioinput{
                    width: 610px;
                    
                    ::v-deep .el-form-item__label{
                        // width: 100px !important;
                        padding-right: 0px;
                        // box-sizing: border-box;
                    }
                    ::v-deep .el-form-item__content{
                        margin-left: 130px !important;
                        .el-radio{
                            margin-right: 0px;
                        }
                    }
                    ::v-deep .el-input__inner{
                        width: 400px;
                    }
                }
            }
        }
        .buttonbox{
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            border-top: 1px solid rgba(242, 242, 242, 1);
            justify-content: center;
            ::v-deep .el-form-item__content{
                margin-left: 0 !important;
            }
            .creat{
                width: 140px;
                height: 40px;
                background: #0079fe;
            }
            .creat:hover{
                background: #66b1ff !important;
                color: #fff !important;
            }
            .reseate{
                width: 140px;
                height: 40px;
                border-color: #0079fe !important;
                color: #0079fe;
            }
            .reseate:hover{
                background: #fff !important;
                border-color: #66b1ff !important;
                color: #66b1ff !important;
            }
            .el-button+.el-button{
                margin-left: 20px;
            }
        }
        .left{
            
            .radioinput{
                width: 520px;
                ::v-deep .el-form-item__label{
                    width: 120px !important;
                    padding-right: 0px;
                    // box-sizing: border-box;
                }
                ::v-deep .el-form-item__content{
                    margin-left: 130px !important;
                }
                ::v-deep .el-input__inner{
                    width: 400px;
                }
            }
        }
        .splitext{
             width: 520px;
             position: relative;
            ::v-deep .el-form-item__label{
                // width: 120px !important;
                padding-right: 0px;
                // box-sizing: border-box;
            }
            ::v-deep .el-form-item__content{
                margin-left: 120px !important;
            }
            ::v-deep .el-input__inner{
                width: 400px;
            }
            p{
                position: absolute;
                top: 45px;
                left: 120px;
                font-size: 12px;
                color: #999;
            }
        }
        .spli{
            display: flex;
            align-items: center;
            width: 520px;
            ::v-deep .el-form-item__label{
                // width: 120px !important;
                padding-right: 0px;
                // box-sizing: border-box;
            }
            ::v-deep .el-form-item__content{
                margin-left: 120px !important;
            }
            ::v-deep .el-input__inner{
                width: 340px;
            }
            p{
                width: 60px;
                height: 40px;
                line-height: 40px;
                margin-bottom: 22px;
                padding-left: 20px;
                box-sizing: border-box;
                // text-align: center;
            }
        }
         .splis{
            display: flex;
            align-items: center;
            width: 520px;
            ::v-deep .el-form-item__label{
                // width: 120px !important;
                padding-right: 0px;
                // box-sizing: border-box;
            }
            ::v-deep .el-form-item__content{
                margin-left: 125px !important;
            }
            ::v-deep .el-input__inner{
                width: 285px;
            }
            .bite{
                font-size: 14px;
                color: #999;
            }
            p{
                width: 110px;
                height: 40px;
                line-height: 40px;
                margin-bottom: 22px;
                padding-left: 20px;
                box-sizing: border-box;
                // text-align: center;
            }
        }
    }
</style>